<template>
  <a-row class="container">
    <a-row class="title-item">烟气备机申领情况</a-row>
    <a-row class="border">
      <a-col :span="6" class="a">
        <h3 class="h2">设备分类</h3>
        <a-row class="list-left">
          <a-directory-tree
            multiple
            default-expand-all
            @select="onSelect"
            @expand="onExpand"
            :show-line="false"
            :show-icon="false"
          >
            <a-tree-node key="0-0">
              <div slot="title" style="color:#9fb043">
                备机
                <span style="color:#bebebe">(5种/125台)</span>
              </div>
              <a-tree-node key="0-0-0">
                <template>
                  <div slot="title" >xxxxxxx备机 | xxxxxxxxx型号 | 剩余25台</div>
                </template>
              </a-tree-node>
              <a-tree-node key="0-0-1">
                <template>
                  <div slot="title" >xxxxxxx备机 | xxxxxxxxx型号 | 剩余25台</div>
                </template>
              </a-tree-node>
              <a-tree-node key="0-0-2">
                <template>
                  <div slot="title" >xxxxxxx备机 | xxxxxxxxx型号 | 剩余25台</div>
                </template>
              </a-tree-node>
              <a-tree-node key="0-0-3">
                <template>
                  <div slot="title" >xxxxxxx备机 | xxxxxxxxx型号 | 剩余25台</div>
                </template>
              </a-tree-node>
            </a-tree-node>
          </a-directory-tree>
        </a-row>
      </a-col>
      <a-col :span="8" class="right">
        <div class="c">
          <a-row class="h2">申领情况</a-row>
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </div>
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="data"
          :pagination="false"
        />
         <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total}条记录`"
            v-model="current"
            :total="160"
            :defaultPageSize="16"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </a-col>
    </a-row>
  </a-row>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "sn",
    align: "center",
    width: "100px"
  },
  {
    title: "申领时间",
    dataIndex: "time",
    align: "center",
  },
  {
    title: "申领人",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "申领原因",
    dataIndex: "bf",
    ellipsis:true,
    width: "30%",
  },
  {
    title: "操作",
    dataIndex: "address",
    align: "center",
    width: "20%",
  }
];

const data = [];
for (let i = 0; i < 7; i++) {
  data.push({
    key: i,
    sn: i,
    time: "2020-07-13 12:00",
    name: `张三`,
    bf: `申领原因申领原因申领原因申领原因申领原因申领原因`,
    address: `详细信息`
  });
}

export default {
  data() {
    return {
      data,
      columns,
      current: 1,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      activeKey: 0
    };
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.getdata();
    },
    open(index) {
      this.activeKey = index;
    },
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    }
  }
};
</script>
<style scoped src="../../../assets/style/pollution.css"></style>
<style scoped>
.h2 {
  color: #37ddc0;
  line-height: 40px;
  margin-left: 30px;
}
.border {
  height: calc(100% - 98px);
}
.list-left {
  height: calc(100% - 40px);
}
.a {
   height: 100%;
  width: 29%;
  border: 1px solid #37ddc0;
}
.title-item {
  /* border: 1px solid yellow; */
  height: 80px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.beijing {
  margin-left: 20px;
}
.wen {
  color: #9fb043;
}
.zi {
  color: #bebebe;
  text-align: center;
}
.right {
  border: 1px solid #37ddc0;
   height: 100%;
  width: 69%;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
  margin-top: 10px;
}
.c {
  display: flex;
  justify-content: space-between;
}
::v-deep .ant-tree{
  font-size: 16px;
}
::v-deep .a[data-v-1e2da2e0]{
  border-right:none;
}
::v-deep .ant-table-thead > tr > th {
  border-bottom:none
}
::v-deep.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover::before{
  background: transparent;
}
::v-deep .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before{
 border: 2px solid #207064;
 background: #1A2223;
 margin: 0 20px 0 20px;
}

::v-deep .ant-table-tbody > tr.ant-table-row-selected td{
  background: transparent;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper{
  color: rgba(255,255,255,0.8);
}
::v-deep .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected{
  color: #37ddc0;
}
/* 分页 */
.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.ant-form-item-control {
  width: 200px;
}

/* 分页 */
::v-deep .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>
<style>
.container {
  height: 100%;
  width: 100%;
}
/*.container .ant-table-thead > tr > th {*/
/*  background-color: #207064;*/
/*  color: #9fb043;*/
/*}*/
/*.container tr:hover td {*/
/*  background-color: rgba(0, 0, 0, 0) !important;*/
/*}*/
/*.container .ant-table-thead > tr,*/
/*.ant-table-tbody > tr {*/
/*  color: #bebebe;*/
/*}*/
/*.container .ant-table-tbody > tr > td {*/
/*  border-bottom: 1px solid #27615a;*/
/*}*/
/*.ant-table-row td:last-child {*/
/*  color: #207064;*/
/*}*/
</style>